<template>
  <div class="bussiens">
    <div class="title"><div class="font20">商机中心</div></div>
    <div class="from_s">
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="产品">
            <el-input v-model="productName" ></el-input>
          </el-form-item>
          <el-form-item label="商机状态">
            <el-select v-model="businessStatus" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="已通过" value="2"></el-option>
              <el-option label="已拒绝" value="3"></el-option>
              <el-option label="已引荐" value="4"></el-option>
              <el-option label="引荐成功" value="5"></el-option>
              <el-option label="已签单" value="7"></el-option>
              <el-option label="签单成功" value="8"></el-option>
              <el-option label="已回款" value="9"></el-option>
            </el-select>  
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search(1)"><svg-icon icon-class="sousuo"/>查询</el-button>
          </el-form-item>
      </el-form>
    </div>
    <div class="bussiens_cont">
       <el-table ref="singleTable" stripe :data="tableData" highlight-current-row  style="width: 100%">
          <!-- <el-table-column type="index" width="60"></el-table-column> -->
          <el-table-column prop="productName" label="产品名称"></el-table-column>  
          <el-table-column label="报备时间">
            <template slot-scope="scope">
                <span class="cloa09">{{scope.row.createTime | formatDate}}</span>
            </template>
          </el-table-column>  
          <el-table-column label="类型">
            <template slot-scope="scope">
                <span class="clo498">{{scope.row.returnType}}</span>
            </template>
          </el-table-column>  
          <el-table-column label="返点">
            <template slot-scope="scope">
                <span class="clo498">{{scope.row.returnPoint}}%</span>
            </template>
          </el-table-column>  
          <!-- <el-table-column label="推荐人姓名">
            <template slot-scope="scope">
                <span class="cloa09">{{scope.row.userName}}</span>
            </template>
          </el-table-column>   -->
          <el-table-column label="客户名称">
            <template slot-scope="scope">
                <span class="cloa09">{{scope.row.customName}}</span>
            </template>
          </el-table-column>  
          <el-table-column label="客户联系人">
            <template slot-scope="scope">
              <span style="color:red;" v-if="scope.row.businessStatus == 1 || scope.row.businessStatus == 3">*</span>
                <span class="cloa09" v-else>{{scope.row.customPeople}}</span>
            </template>
          </el-table-column> 
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              <span style="color:red;" v-if="scope.row.businessStatus == 1 || scope.row.businessStatus == 3">*</span>
                <span class="cloa09" v-else>{{scope.row.customPhone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" filter-placement="bottom-end" width="70">
            <template slot-scope="scope">
                  <span v-if="scope.row.businessStatus == 1" class="active1">待审核</span>
                  <span v-else-if="scope.row.businessStatus == 2" class="active">已通过</span>
                  <span v-else-if="scope.row.businessStatus == 3" class="active2">已拒绝</span>
                  <span v-else-if="scope.row.businessStatus == 4" class="active3">已引荐</span>
                  <span v-else-if="scope.row.businessStatus == 5" class="active3">引荐成功</span>
                  <span v-else-if="scope.row.businessStatus == 7" class="active4">已签单</span>
                  <span v-else-if="scope.row.businessStatus == 8" class="active5">签单成功</span>
                  <span v-else-if="scope.row.businessStatus == 9" class="active5">已回款</span>
            </template>
          </el-table-column>
           <el-table-column width="70">
             <template slot-scope="scope">
               <div class="tistlc">
                <span v-if="scope.row.businessStatus == 1" @click="auditView(scope.row)"><svg-icon icon-class="shezhi"/></span>
                <router-link v-else :to='"/bussiensdetail?id="+scope.row.id'><svg-icon icon-class="yuanyou"/></router-link>
              </div>
              </template>
          </el-table-column>  
       </el-table>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout=" pager,  total,jumper"
          :total="totalCount">
      </el-pagination>
    </div>
    <!-- 修改 -->
    <el-dialog
      :visible.sync="auditViewShow"
      width="430px"
      custom-class="cles addcles succCuo">
      <div class="tanc">
        <div class="cont">
          <ul>
            <li>
              <div class="lt">产品：</div>
              <div class="rt">{{thisRow.productName}}</div>
            </li> 
            <li>
              <div class="lt">报备时间：</div>
              <div class="rt"><span>{{thisRow.createTime | formatDate}}</span></div>
            </li>
            <li>
              <div class="lt">返点：</div>
              <div class="rt clod"><span>{{thisRow.returnType}}</span><span> 返{{thisRow.returnPoint}}%</span></div>
            </li> 
            <!-- <li>
              <div class="lt">推荐人姓名：</div>
              <div class="rt">{{thisRow.userName}}</div>
            </li>  -->
            <li>
              <div class="lt">客户名称：</div>
              <div class="rt">{{thisRow.customName}}</div>
            </li>  
            <li>
              <div class="lt">客户需求描述：</div>
              <div class="rt">{{thisRow.customDescrption}}</div>
            </li>  
          </ul>  
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
          <button @click="pass()">通过</button>
          <button @click="reject()">拒绝</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from "@/utils/filter.js"
import {GetPageOfBusinessByCompany,DoPass,DoReject,updateNoticeStatus} from "@/api/business"
export default {
  name: "home",
  data() {
    return {
      auditViewShow:false,
      tableData:[],
      page:1,
      pageSize:10,
      totalCount:0,
      productName:'',
      businessStatus:'',
      thisRow:{}
    }
  },
  filters: {
    formatDate(time) {
      var data = new Date(time)
      return formatDate(data, "yyyy-MM-dd hh:mm:ss")
    }
  },
  methods:{
    auditView(row){
      this.thisRow = row
      this.auditViewShow = true
    },
    pass(){
      this.$confirm('是否确认通过审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DoPass(this.thisRow.id).then(res=>{
            if(res.result){
              this.$message({
                type: 'info',
                message: '已通过！'
              });   
              this.search(1)
      this.auditViewShow = false
            }
          })
        }).catch(() => {       
        });
    },
    reject(){
      this.$confirm('是否确认拒绝审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DoReject(this.thisRow.id).then(res=>{
            if(res.result){
              this.$message({
                type: 'info',
                message: '已通过！'
              });   
              this.search(1)
      this.auditViewShow = false
            }
          })
        }).catch(() => {       
        });

      this.search(1)
    },
    sizeChange(val) {
      this.pageSize = val
      this.search(1)
    },
    currentChange(val) {
      this.page = val
      this.search(val)
    },
    search(page){
      GetPageOfBusinessByCompany(
         this.productName,
         this.businessStatus,
          page,
          this.pageSize
        ).then(res => {
          if(res!=null && res.Data != null){
            this.tableData = res.Data
            this.totalCount = res.TotalCount
          }else{
            this.tableData = []
            this.totalCount = 0
          }
        })
    }
  },
  created() {
    var status = this.$route.query.status
    if(status != null && status != ''){
      this.businessStatus = status
    }
    this.search(1)
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.succCuo{
  box-shadow: 0px 0px 13px 0px 
		rgba(83, 93, 115, 0.45);
	border-radius: 3px;
	border: solid 1px #ffb0a9;
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding-bottom: 0;
  }
   .dialog-footer{
      text-align: center;
       button{
          width: 97px;
          height: 30px;
          border-radius: 15px;
          color: #fff;
          border: none;
        &:first-child{
          background-color: #467be7;
          margin-right: 20px;
        }
        &:last-child{
          background-color: #fc6352; 
        }
      }
    }
}
.bussiens{
  .title{
    margin-bottom: 20px;
    .font20{
       color: #333333;
      font-size: 20px;
      padding-left: 15px;
      position: relative;
      line-height: 33px;
      &::after{
        content: '';
      width: 4px;
      height: 15px;
      background-color: #2f59ab;
      border-radius: 2px;
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      }
    }
  }
  .from_s{
    background-color: #ffffff;
	  box-shadow: 0px 0px 8px 0px 
		rgba(43, 61, 86, 0.14);
    border-radius: 5px;
    padding: 15px 20px;
    .el-form-item{
      margin-bottom: 0;
      .el-button--primary{
        background-color: #2f59ab;
        border-radius: 3px;
        border:none;
        .svg-icon{
          position: relative;
          top: 2px;
          margin-right: 4px;
        }
      }
    }
  }
  .bussiens_cont{
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px 
      rgba(43, 61, 86, 0.14);
    border-radius: 5px;
    padding: 30px;
    margin-top: 20px;
    .el-pagination{
      text-align: center;
      margin-top: 20px;
      .el-pager{
         li{
           background-color: #ddd;
           color: #333333;
           margin: 0 4px;
           border-radius: 4px;
           &.active{
              background-color: #2f59ab;
              color: #fff;
           }
         }
      }
      button{
        background-color: #ddd;
        color: #333333;
        margin: 0 4px;
        border-radius: 4px;
      }
    }
    th{
      background: rgba(26, 141, 229, 0.1);
      color: #333333;
    }
    .has-gutter{
      border-radius: 3px;
      overflow: hidden;
    }
    .el-table__row:hover{
      .tistlc .svg-icon{
        color: #2f59ab;
      }
    }
    th,td{
      text-align: center;
    }
    .cloa09{
      color: #a09f9f;
    }
    .clo498{
      color: #4985e9;
    }
    .active{
      color: #2ea328;
    }
    .active1{
      color: #767676;
    }
    .active2{
      color: #9c5dc0;
    }
    .active3{
      color: #4985e9;
    }
    .active4{
      color: #01ccf7;
    }
    .active5{
      color: #febf00;
    }
    .tistlc{
      color: #c9c9c9;
      span{
        position: absolute;
        left: 4px;
      }
      .svg-icon{
        cursor: pointer;
      }
    }
  }
}
.flexCon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  align-items: center;
}
.tanc{
  .cont{
    
    ul{
      padding: 0;
    }
    li{
      list-style: none;
      overflow: hidden;
      margin-bottom: 10px;
      color: #333333;
      font-size: 14px;
      .lt{
        width: 120px;
        float: left;
        text-align: right;
      }
      .rt{
        width: calc(100% - 120px);
        float: left;
        span{
          &:last-child{
            margin-left: 10px;
          }
        }
        &.clod{
          color: #4985e9;
        }
      }
    }
  }
}
</style>
